:root {
  --circle-width: 100px
}
.circle {
  width: var(--circle-width);
  height: var(--circle-width);
  background-color: #eee;
  margin: 100px auto;
  position: relative;
  border-radius: 50%;
}

.left, .right {
  width: calc(var(--circle-width) / 2);
  height: var(--circle-width);
  position: absolute;
  /* background-color: black;
  opacity: 0.5; */
  overflow: hidden;
}

.right {
  right: 0;
}

.left .left-circle, .right .right-circle{
  width: calc(var(--circle-width) / 2);
  height: var(--circle-width);
  background-color: #e75454;
  /* transition: all 0.5s; */
}

.left .left-circle {
  border-top-left-radius: var(--circle-width);
  border-bottom-left-radius: var(--circle-width);
  transform-origin: right center;
  transform: rotate(-180deg);
  /* animation: progress1 2s linear forwards;
  animation-delay: 2s; */
}
.right .right-circle {
  border-top-right-radius: var(--circle-width);
  border-bottom-right-radius: var(--circle-width);
  transform-origin: left center;
  transform: rotate(-180deg);
  /* animation: progress2 2s linear forwards; */
}

/* .left:hover .left-circle {
  transform: rotate(0);
}
.right:hover .right-circle {
  transform: rotate(0);
} */
@keyframes progress1 {
  to {
    transform: rotate(0);
  }
}
@keyframes progress2 {
  to {
    transform: rotate(0);
  }
}

.inner {
  width: calc(var(--circle-width) - 20px);
  height: calc(var(--circle-width) - 20px);
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
  line-height: calc(var(--circle-width) - 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 20px;
}
